{% load staticfiles %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="{% static '/assets/js/axios.min.js' %}"></script>
		<script src="{% static '/assets/js/echarts.min.js' %}"></script>
		<title></title>
	</head>
	<body>
		<body>
			<div id="main" style="width: 600px;height:400px;margin: auto;"></div>
			<p style="margin: auto;font-weight: bold;text-align: center;margin-top: 20px;font-size: 19px;">各年份学院新闻数目情况</p>
			<div id="main2" style="width: 600px;height:400px;margin: auto;"></div>
			<script>
				axios.get('http://127.0.0.1:8000/analysis/').then(response => {
					// 请求成功
					let res = response.data.data;
					console.log(res);
					let legend = [];
					let series = [];
					for (let i = 0; i < res.length; i++) {
						legend.push(res[i].college);
						let obj = {}
						obj.value = res[i].Count;
						obj.name = res[i].college;
						series.push(obj);
					}
					draw1(legend, series);
				}).catch(error => {
					// 请求失败，
					console.log(error);
				});


				axios.get('http://127.0.0.1:8000/analysis_date/').then(response => {
					// 请求成功
					let res = response.data.data;
					console.log(res);
					let t1=getDate(res.cec);
					let t2=getDate(res.mei);
					let t3=getDate(res.nav);
					let t4=getDate(res.soc);
					console.log(t1);
					draw2(t1, t2, t3, t4);
					
				}).catch(error => {
					// 请求失败，
					console.log(error);
				});
				
				
				function getDate(list){
					let data=[];
					for(let i = 0 ; i < list.length ; i++){
						data.push(list[i].total)
					}
					return data;
					
				}

				// 绘制图表。
				function draw1(legend, series) {
					echarts.init(document.getElementById('main')).setOption({
						title: {
							text: '新闻总数比例',
							x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: legend
						},
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: series,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					});
				}

				function draw2(t1, t2, t3, t4) {
					echarts.init(document.getElementById('main2')).setOption({
						// title: {
						// 	text: '各年份学院新闻数目情况'
						// },
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#6a7985'
								}
							}
						},
						legend: {
							data: ['计算机工程学院', '法学院', '航海学院', '轮机工程学院']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: ['2015', '2016', '2017', '2018', '2019']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
								name: '计算机工程学院',
								type: 'line',
								stack: '总量',
								areaStyle: {},
								data: t1
							},
							{
								name: '法学院',
								type: 'line',
								stack: '总量',
								areaStyle: {},
								data: t4
							},
							{
								name: '航海学院',
								type: 'line',
								stack: '总量',
								areaStyle: {},
								data: t3
							},
							{
								name: '轮机工程学院',
								type: 'line',
								stack: '总量',
								areaStyle: {},
								data: t2
							}
						]
					});
				}
			</script>
		</body>
	</body>
</html>
